<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交圈 - 综合内容展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 0.75rem 0;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #2c6ecb;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo i {
            font-size: 1.75rem;
        }
        
        .nav-link {
            color: #666;
            font-weight: 500;
            margin: 0 0.5rem;
            transition: all 0.2s ease;
            padding: 0.5rem 0.75rem;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #2c6ecb;
        }
        
        .search-bar {
            max-width: 300px;
            width: 100%;
            position: relative;
        }
        
        .search-bar input {
            padding-left: 2.5rem;
            background-color: #f5f7fa;
            border-color: #e1e5eb;
        }
        
        .search-bar i {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
        }
        
        .user-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            cursor: pointer;
        }
        
        .create-btn {
            background-color: #2c6ecb;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
            transition: background-color 0.2s ease;
        }
        
        .create-btn:hover {
            background-color: #1a5bcb;
        }
        
        /* 主内容区 */
        .main-container {
            padding: 2rem 0;
        }
        
        /* 内容类型切换 */
        .content-tabs {
            background-color: white;
            border-radius: 8px;
            padding: 0.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .content-tab {
            padding: 0.75rem 1.25rem;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
            color: #666;
        }
        
        .content-tab.active {
            background-color: #eef2ff;
            color: #2c6ecb;
        }
        
        .content-tab:hover:not(.active) {
            background-color: #f5f7fa;
            color: #333;
        }
        
        /* 投票详情样式 */
        .vote-detail-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            margin-bottom: 2rem;
        }
        
        .vote-header {
            padding: 1.5rem;
            border-bottom: 1px solid #f1f5f9;
        }
        
        .vote-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .vote-creator {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .creator-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .creator-info {
            line-height: 1.3;
        }
        
        .creator-name {
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .vote-time {
            font-size: 0.9rem;
            color: #94a3b8;
        }
        
        .vote-status {
            display: inline-block;
            font-size: 0.9rem;
            padding: 0.3rem 0.75rem;
            border-radius: 4px;
            background-color: #e6f7ee;
            color: #00b42a;
            font-weight: 500;
        }
        
        .vote-status.closed {
            background-color: #fff2e8;
            color: #ff7d00;
        }
        
        .vote-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #2d3436;
        }
        
        .vote-description {
            color: #636e72;
            margin-bottom: 1rem;
            line-height: 1.7;
        }
        
        .vote-category {
            display: inline-block;
            font-size: 0.9rem;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            background-color: #eef2ff;
            color: #2c6ecb;
            margin-bottom: 1rem;
        }
        
        .vote-content {
            padding: 0 1.5rem 1.5rem;
        }
        
        .vote-options {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .vote-option {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 1.25rem;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .vote-option:hover {
            border-color: #2c6ecb;
            background-color: #f8fafc;
        }
        
        .vote-option.selected {
            border-color: #2c6ecb;
            background-color: #f0f7ff;
        }
        
        .option-text {
            position: relative;
            z-index: 2;
            font-size: 1.05rem;
        }
        
        .option-votes {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
            font-size: 0.95rem;
            position: relative;
            z-index: 2;
        }
        
        .votes-count {
            font-weight: 600;
            color: #2c6ecb;
        }
        
        .votes-percentage {
            color: #636e72;
        }
        
        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background-color: #2c6ecb;
            transition: width 0.5s ease;
            z-index: 1;
        }
        
        .vote-stats {
            display: flex;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            background-color: #f8fafc;
            border-top: 1px solid #f1f5f9;
            border-bottom: 1px solid #f1f5f9;
        }
        
        .vote-stat {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #636e72;
        }
        
        .vote-stat i {
            color: #2c6ecb;
        }
        
        .stat-value {
            font-weight: 600;
            color: #2d3436;
        }
        
        .vote-actions {
            display: flex;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
        }
        
        .primary-action {
            background-color: #2c6ecb;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.65rem 1.5rem;
            font-weight: 500;
            transition: background-color 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .primary-action:hover {
            background-color: #1a5bcb;
        }
        
        .secondary-actions {
            display: flex;
            gap: 1rem;
        }
        
        .secondary-action {
            background: none;
            border: none;
            color: #636e72;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .secondary-action:hover {
            background-color: #f1f5f9;
            color: #2c6ecb;
        }
        
        .secondary-action.active {
            color: #2c6ecb;
        }
        
        /* 评论区 */
        .comments-section {
            padding: 1.5rem;
            border-top: 1px solid #f1f5f9;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .comments-title {
            font-size: 1.25rem;
            font-weight: 600;
        }
        
        .comment-form {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-input {
            flex: 1;
        }
        
        .comment-input textarea {
            width: 100%;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            resize: none;
            min-height: 100px;
            transition: border-color 0.2s ease;
        }
        
        .comment-input textarea:focus {
            outline: none;
            border-color: #2c6ecb;
        }
        
        .comment-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.75rem;
        }
        
        .comment-btn {
            background-color: #2c6ecb;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.5rem 1.25rem;
            font-weight: 500;
            transition: background-color 0.2s ease;
        }
        
        .comment-btn:hover {
            background-color: #1a5bcb;
        }
        
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .comment-item {
            display: flex;
            gap: 1rem;
        }
        
        .comment-content {
            flex: 1;
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 1rem;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .comment-author {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .comment-time {
            font-size: 0.85rem;
            color: #94a3b8;
        }
        
        .comment-text {
            margin-bottom: 0.75rem;
            color: #333;
        }
        
        .comment-reactions {
            display: flex;
            gap: 1.5rem;
            font-size: 0.9rem;
        }
        
        .comment-reaction {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: #636e72;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .comment-reaction:hover {
            color: #2c6ecb;
        }
        
        .comment-reaction.liked {
            color: #e53e3e;
        }
        
        /* 内容列表通用样式 */
        .content-section {
            margin-bottom: 2.5rem;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.25rem;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #2d3436;
        }
        
        .view-all {
            color: #2c6ecb;
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .view-all:hover {
            color: #1a5bcb;
            text-decoration: underline;
        }
        
        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .content-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .content-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .content-body {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .content-category {
            display: inline-block;
            font-size: 0.8rem;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            margin-bottom: 0.75rem;
            font-weight: 500;
        }
        
        .category-article {
            background-color: #e6f7ff;
            color: #1890ff;
        }
        
        .category-album {
            background-color: #fff0f0;
            color: #f5222d;
        }
        
        .category-status {
            background-color: #f6ffed;
            color: #52c41a;
        }
        
        .category-service {
            background-color: #fff7e6;
            color: #fa8c16;
        }
        
        .category-job {
            background-color: #f0f2ff;
            color: #722ed1;
        }
        
        .category-question {
            background-color: #fff0f6;
            color: #eb2f96;
        }
        
        .content-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.75rem;
            color: #2d3436;
            flex: 1;
        }
        
        .content-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #94a3b8;
        }
        
        .content-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .content-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .content-stat {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        /* 相册特殊样式 */
        .album-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 2px;
            height: 180px;
        }
        
        .album-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .album-image:nth-child(1) {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }
        
        .album-image:nth-child(2) {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }
        
        .album-image:nth-child(3) {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }
        
        .album-image:nth-child(4) {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }
        
        .album-image:nth-child(5) {
            grid-column: 1 / 3;
            grid-row: 3 / 4;
        }
        
        .album-image:nth-child(6) {
            grid-column: 3 / 4;
            grid-row: 1 / 4;
        }
        
        .album-count {
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
            border-radius: 0 0 0 4px;
        }
        
        .album-container {
            position: relative;
        }
        
        /* 动态特殊样式 */
        .status-content {
            color: #636e72;
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }
        
        /* 招聘求职特殊样式 */
        .job-type {
            display: inline-block;
            font-size: 0.8rem;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            background-color: #f0f7ff;
            color: #2c6ecb;
            margin-left: 0.5rem;
        }
        
        .job-salary {
            color: #f5222d;
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }
        
        /* 问答特殊样式 */
        .question-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
        }
        
        .question-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .question-tag {
            background-color: #f1f5f9;
            color: #64748b;
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
        }
        
        .answer-count {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            color: #2c6ecb;
            font-weight: 600;
        }
        
        /* 响应式调整 */
        @media (max-width: 1200px) {
            .content-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
        
        @media (max-width: 992px) {
            .search-bar {
                max-width: 200px;
            }
            
            .content-tabs {
                overflow-x: auto;
                white-space: nowrap;
            }
            
            .vote-stats {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }
        
        @media (max-width: 768px) {
            .navbar-nav {
                margin-top: 1rem;
            }
            
            .search-bar {
                max-width: 100%;
                margin: 1rem 0;
            }
            
            .user-actions {
                margin-top: 1rem;
            }
            
            .vote-actions {
                flex-direction: column;
                gap: 1rem;
            }
            
            .secondary-actions {
                justify-content: space-between;
                width: 100%;
            }
            
            .content-grid {
                grid-template-columns: 1fr;
            }
            
            .section-title {
                font-size: 1.25rem;
            }
        }
        
        @media (max-width: 576px) {
            .vote-title {
                font-size: 1.25rem;
            }
            
            .comment-form {
                flex-direction: column;
            }
            
            .comment-reactions {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-connectdevelop"></i>
                <span>社交圈</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="fas fa-comments me-1"></i> 投票</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-newspaper me-1"></i> 文章</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-image me-1"></i> 相册</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-briefcase me-1"></i> 招聘</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-question-circle me-1"></i> 问答</a>
                    </li>
                </ul>
                
                <div class="d-flex align-items-center gap-3 flex-wrap">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" class="form-control" placeholder="搜索内容...">
                    </div>
                    
                    <div class="user-actions">
                        <button class="create-btn">
                            <i class="fas fa-plus"></i>
                            <span>发布</span>
                        </button>
                        <img src="https://picsum.photos/id/1005/38/38" alt="用户头像" class="user-avatar">
                    </div>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="main-container">
        <div class="container">
            <!-- 内容类型切换 -->
            <div class="d-flex content-tabs">
                <div class="content-tab active">
                    <i class="fas fa-comments"></i>
                    <span>投票详情</span>
                </div>
                <div class="content-tab">
                    <i class="fas fa-newspaper"></i>
                    <span>文章</span>
                </div>
                <div class="content-tab">
                    <i class="fas fa-image"></i>
                    <span>相册</span>
                </div>
                <div class="content-tab">
                    <i class="fas fa-stream"></i>
                    <span>动态</span>
                </div>
                <div class="content-tab">
                    <i class="fas fa-concierge-bell"></i>
                    <span>服务</span>
                </div>
                <div class="content-tab">
                    <i class="fas fa-briefcase"></i>
                    <span>招聘</span>
                </div>
                <div class="content-tab">
                    <i class="fas fa-user-tie"></i>
                    <span>求职</span>
                </div>
                <div class="content-tab">
                    <i class="fas fa-question-circle"></i>
                    <span>问答</span>
                </div>
            </div>
            
            <!-- 投票详情 -->
            <div class="vote-detail-card">
                <div class="vote-header">
                    <div class="vote-meta">
                        <div class="vote-creator">
                            <img src="https://picsum.photos/id/1012/50/50" alt="用户头像" class="creator-avatar">
                            <div class="creator-info">
                                <div class="creator-name">科技前沿</div>
                                <div class="vote-time">2023年6月15日 发布</div>
                            </div>
                        </div>
                        <span class="vote-status">进行中</span>
                    </div>
                    
                    <div class="vote-category">科技 · AI</div>
                    <h1 class="vote-title">你更看好哪种AI技术的未来发展前景？</h1>
                    <p class="vote-description">
                        随着人工智能技术的快速发展，各种AI应用层出不穷。从自然语言处理到计算机视觉，从自主机器人到预测分析，AI正在改变我们的生活和工作方式。你认为哪种AI技术将在未来5-10年取得最显著的发展和应用？
                    </p>
                </div>
                
                <div class="vote-content">
                    <div class="vote-options">
                        <div class="vote-option" data-option="1">
                            <div class="option-text">大语言模型（如GPT系列、LLaMA等）</div>
                            <div class="option-votes">
                                <span class="votes-count">5,241 票</span>
                                <span class="votes-percentage">42%</span>
                            </div>
                            <div class="progress-bar" style="width: 42%;"></div>
                        </div>
                        
                        <div class="vote-option" data-option="2">
                            <div class="option-text">计算机视觉（图像/视频处理与识别）</div>
                            <div class="option-votes">
                                <span class="votes-count">3,636 票</span>
                                <span class="votes-percentage">30%</span>
                            </div>
                            <div class="progress-bar" style="width: 30%;"></div>
                        </div>
                        
                        <div class="vote-option" data-option="3">
                            <div class="option-text">自主智能体（如机器人、自动驾驶系统）</div>
                            <div class="vote-options">
                                <span class="votes-count">2,398 票</span>
                                <span class="votes-percentage">20%</span>
                            </div>
                            <div class="progress-bar" style="width: 20%;"></div>
                        </div>
                        
                        <div class="vote-option" data-option="4">
                            <div class="option-text">预测分析与决策支持系统</div>
                            <div class="option-votes">
                                <span class="votes-count">962 票</span>
                                <span class="votes-percentage">8%</span>
                            </div>
                            <div class="progress-bar" style="width: 8%;"></div>
                        </div>
                    </div>
                </div>
                
                <div class="vote-stats">
                    <div class="vote-stat">
                        <i class="fas fa-users"></i>
                        <span>总参与人数: <span class="stat-value">12,237</span></span>
                    </div>
                    <div class="vote-stat">
                        <i class="fas fa-comment"></i>
                        <span>评论: <span class="stat-value">542</span></span>
                    </div>
                    <div class="vote-stat">
                        <i class="fas fa-share-alt"></i>
                        <span>分享: <span class="stat-value">189</span></span>
                    </div>
                    <div class="vote-stat">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏: <span class="stat-value">326</span></span>
                    </div>
                    <div class="vote-stat">
                        <i class="fas fa-clock"></i>
                        <span>结束时间: <span class="stat-value">还剩 3 天 12 小时</span></span>
                    </div>
                </div>
                
                <div class="vote-actions">
                    <button class="primary-action">
                        <i class="fas fa-check"></i>
                        <span>提交投票</span>
                    </button>
                    
                    <div class="secondary-actions">
                        <button class="secondary-action">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </button>
                        <button class="secondary-action">
                            <i class="fas fa-comment"></i>
                            <span>评论</span>
                        </button>
                        <button class="secondary-action">
                            <i class="fas fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="secondary-action">
                            <i class="fas fa-flag"></i>
                            <span>举报</span>
                        </button>
                    </div>
                </div>
                
                <!-- 评论区 -->
                <div class="comments-section">
                    <div class="comments-header">
                        <h3 class="comments-title">评论 (542)</h3>
                        <div>
                            <select class="form-select form-select-sm">
                                <option>最新评论</option>
                                <option>最热评论</option>
                                <option>最多点赞</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="comment-form">
                        <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="comment-avatar">
                        <div class="comment-input">
                            <textarea placeholder="分享你的观点..."></textarea>
                            <div class="comment-actions">
                                <button class="comment-btn">发表评论</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="comments-list">
                        <!-- 评论1 -->
                        <div class="comment-item">
                            <img src="https://picsum.photos/id/1025/40/40" alt="用户头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-header">
                                    <div class="comment-author">AI研究者</div>
                                    <div class="comment-time">2小时前</div>
                                </div>
                                <div class="comment-text">
                                    我认为大语言模型和计算机视觉会协同发展，未来多模态AI系统将成为主流。单一技术的发展会有瓶颈，但结合起来能创造更多可能性。
                                </div>
                                <div class="comment-reactions">
                                    <div class="comment-reaction liked">
                                        <i class="fas fa-heart"></i>
                                        <span>128</span>
                                    </div>
                                    <div class="comment-reaction">
                                        <i class="fas fa-comment"></i>
                                        <span>回复</span>
                                    </div>
                                    <div class="comment-reaction">
                                        <i class="fas fa-share"></i>
                                        <span>分享</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评论2 -->
                        <div class="comment-item">
                            <img src="https://picsum.photos/id/1074/40/40" alt="用户头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-header">
                                    <div class="comment-author">未来科技</div>
                                    <div class="comment-time">昨天 15:30</div>
                                </div>
                                <div class="comment-text">
                                    自主智能体，特别是自动驾驶技术，可能会在未来5年内取得突破性进展。目前多家公司都在全力研发，一旦技术成熟并通过监管，将彻底改变我们的出行方式。
                                </div>
                                <div class="comment-reactions">
                                    <div class="comment-reaction liked">
                                        <i class="fas fa-heart"></i>
                                        <span>87</span>
                                    </div>
                                    <div class="comment-reaction">
                                        <i class="fas fa-comment"></i>
                                        <span>回复</span>
                                    </div>
                                    <div class="comment-reaction">
                                        <i class="fas fa-share"></i>
                                        <span>分享</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评论3 -->
                        <div class="comment-item">
                            <img src="https://picsum.photos/id/1066/40/40" alt="用户头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-header">
                                    <div class="comment-author">数据分析员</div>
                                    <div class="comment-time">3天前</div>
                                </div>
                                <div class="comment-text">
                                    预测分析系统在商业领域的应用会越来越广泛，特别是在金融、医疗和供应链管理方面。好的预测模型可以帮助企业降低成本，提高效率，这方面的需求非常大。
                                </div>
                                <div class="comment-reactions">
                                    <div class="comment-reaction">
                                        <i class="fas fa-heart"></i>
                                        <span>42</span>
                                    </div>
                                    <div class="comment-reaction">
                                        <i class="fas fa-comment"></i>
                                        <span>回复</span>
                                    </div>
                                    <div class="comment-reaction">
                                        <i class="fas fa-share"></i>
                                        <span>分享</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4">
                        <button class="btn btn-outline-secondary">加载更多评论</button>
                    </div>
                </div>
            </div>
            
            <!-- 相关文章 -->
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">相关文章</h2>
                    <a href="#" class="view-all">
                        查看全部 <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
                
                <div class="content-grid">
                    <!-- 文章1 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/180/600/400" alt="大语言模型发展现状" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-article">科技</span>
                            <h3 class="content-title">大语言模型的最新发展与未来挑战</h3>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1001/24/24" alt="作者头像" class="author-avatar">
                                    <span>AI科技报</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>2.5k</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-comment"></i>
                                        <span>86</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文章2 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/0/600/400" alt="计算机视觉应用" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-article">技术</span>
                            <h3 class="content-title">计算机视觉在医疗领域的创新应用</h3>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1002/24/24" alt="作者头像" class="author-avatar">
                                    <span>医疗科技前沿</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>1.8k</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-comment"></i>
                                        <span>54</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文章3 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/160/600/400" alt="自动驾驶技术" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-article">汽车</span>
                            <h3 class="content-title">自动驾驶技术的发展瓶颈与突破方向</h3>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1003/24/24" alt="作者头像" class="author-avatar">
                                    <span>未来出行</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>3.2k</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-comment"></i>
                                        <span>124</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相关相册 -->
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">AI技术展览相册</h2>
                    <a href="#" class="view-all">
                        查看全部 <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
                
                <div class="content-grid">
                    <!-- 相册1 -->
                    <div class="content-card">
                        <div class="album-container">
                            <div class="album-grid">
                                <img src="https://picsum.photos/id/96/300/300" alt="AI展览照片1" class="album-image">
                                <img src="https://picsum.photos/id/26/300/300" alt="AI展览照片2" class="album-image">
                                <img src="https://picsum.photos/id/42/300/300" alt="AI展览照片3" class="album-image">
                                <img src="https://picsum.photos/id/60/300/300" alt="AI展览照片4" class="album-image">
                                <img src="https://picsum.photos/id/54/300/300" alt="AI展览照片5" class="album-image">
                                <img src="https://picsum.photos/id/48/300/300" alt="AI展览照片6" class="album-image">
                            </div>
                            <div class="album-count">18张照片</div>
                        </div>
                        <div class="content-body">
                            <span class="content-category category-album">科技展览</span>
                            <h3 class="content-title">2023世界人工智能大会现场纪实</h3>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1010/24/24" alt="作者头像" class="author-avatar">
                                    <span>科技摄影师</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>5.7k</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>328</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册2 -->
                    <div class="content-card">
                        <div class="album-container">
                            <div class="album-grid">
                                <img src="https://picsum.photos/id/119/300/300" alt="机器人照片1" class="album-image">
                                <img src="https://picsum.photos/id/111/300/300" alt="机器人照片2" class="album-image">
                                <img src="https://picsum.photos/id/177/300/300" alt="机器人照片3" class="album-image">
                                <img src="https://picsum.photos/id/169/300/300" alt="机器人照片4" class="album-image">
                                <img src="https://picsum.photos/id/155/300/300" alt="机器人照片5" class="album-image">
                                <img src="https://picsum.photos/id/185/300/300" alt="机器人照片6" class="album-image">
                            </div>
                            <div class="album-count">12张照片</div>
                        </div>
                        <div class="content-body">
                            <span class="content-category category-album">机器人</span>
                            <h3 class="content-title">全球顶尖人形机器人集锦</h3>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1011/24/24" alt="作者头像" class="author-avatar">
                                    <span>机器人爱好者</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>4.2k</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>256</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册3 -->
                    <div class="content-card">
                        <div class="album-container">
                            <div class="album-grid">
                                <img src="https://picsum.photos/id/1/300/300" alt="AI实验室1" class="album-image">
                                <img src="https://picsum.photos/id/2/300/300" alt="AI实验室2" class="album-image">
                                <img src="https://picsum.photos/id/3/300/300" alt="AI实验室3" class="album-image">
                                <img src="https://picsum.photos/id/4/300/300" alt="AI实验室4" class="album-image">
                                <img src="https://picsum.photos/id/5/300/300" alt="AI实验室5" class="album-image">
                                <img src="https://picsum.photos/id/6/300/300" alt="AI实验室6" class="album-image">
                            </div>
                            <div class="album-count">9张照片</div>
                        </div>
                        <div class="content-body">
                            <span class="content-category category-album">实验室</span>
                            <h3 class="content-title">探访全球顶级AI研究实验室</h3>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1013/24/24" alt="作者头像" class="author-avatar">
                                    <span>科学探索者</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>3.8k</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>198</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相关动态 -->
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">AI领域动态</h2>
                    <a href="#" class="view-all">
                        查看全部 <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
                
                <div class="content-grid">
                    <!-- 动态1 -->
                    <div class="content-card">
                        <div class="content-body">
                            <span class="content-category category-status">行业动态</span>
                            <div class="status-content">
                                刚刚收到消息，某科技巨头宣布将在明年推出新一代大语言模型，参数规模达到前所未有的1.8万亿，预计性能将比现有模型提升300%。#AI发展# #大语言模型#
                            </div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1020/24/24" alt="作者头像" class="author-avatar">
                                    <span>科技新闻速递</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-comment"></i>
                                        <span>215</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>532</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 动态2 -->
                    <div class="content-card">
                        <div class="content-body">
                            <span class="content-category category-status">技术分享</span>
                            <div class="status-content">
                                今天在实验室测试了新开发的计算机视觉模型，在物体识别准确率上达到了98.7%，比上个月提升了2.3个百分点。特别在低光照条件下的表现有显著改善。#计算机视觉# #深度学习#
                            </div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1021/24/24" alt="作者头像" class="author-avatar">
                                    <span>视觉算法工程师</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-comment"></i>
                                        <span>87</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>245</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 动态3 -->
                    <div class="content-card">
                        <div class="content-body">
                            <span class="content-category category-status">会议纪要</span>
                            <div class="status-content">
                                参加了今天的自动驾驶技术论坛，行业专家普遍认为L4级自动驾驶将在2025年左右实现商业化落地，但法规和保险体系还需要进一步完善。#自动驾驶# #未来交通#
                            </div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1022/24/24" alt="作者头像" class="author-avatar">
                                    <span>智能交通研究员</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-comment"></i>
                                        <span>156</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>389</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相关服务 -->
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">AI相关服务</h2>
                    <a href="#" class="view-all">
                        查看全部 <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
                
                <div class="content-grid">
                    <!-- 服务1 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/119/600/400" alt="AI模型训练服务" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-service">技术服务</span>
                            <h3 class="content-title">专业AI模型训练与优化服务</h3>
                            <div class="job-salary">¥5,000 - ¥50,000 / 项目</div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1030/24/24" alt="服务提供者头像" class="author-avatar">
                                    <span>AI服务工作室</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-star text-warning"></i>
                                        <span>4.9</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-user"></i>
                                        <span>128单</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务2 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/160/600/400" alt="数据标注服务" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-service">数据服务</span>
                            <h3 class="content-title">高质量AI训练数据标注服务</h3>
                            <div class="job-salary">¥0.1 - ¥5 / 条</div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1031/24/24" alt="服务提供者头像" class="author-avatar">
                                    <span>精准数据服务</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-star text-warning"></i>
                                        <span>4.7</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-user"></i>
                                        <span>356单</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务3 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/180/600/400" alt="AI解决方案咨询" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-service">咨询服务</span>
                            <h3 class="content-title">企业AI转型解决方案咨询</h3>
                            <div class="job-salary">¥20,000 - ¥200,000 / 方案</div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1032/24/24" alt="服务提供者头像" class="author-avatar">
                                    <span>未来科技咨询</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-star text-warning"></i>
                                        <span>4.8</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-user"></i>
                                        <span>47单</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相关招聘 -->
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">AI相关招聘</h2>
                    <a href="#" class="view-all">
                        查看全部 <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
                
                <div class="content-grid">
                    <!-- 招聘1 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/20/600/400" alt="大语言模型工程师招聘" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-job">全职</span>
                            <h3 class="content-title">大语言模型算法工程师 <span class="job-type">急聘</span></h3>
                            <div class="job-salary">¥30K - ¥60K / 月</div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1040/24/24" alt="公司Logo" class="author-avatar">
                                    <span>智脑科技</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-map-marker"></i>
                                        <span>北京</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-clock"></i>
                                        <span>3天前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 招聘2 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/42/600/400" alt="计算机视觉工程师招聘" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-job">全职</span>
                            <h3 class="content-title">计算机视觉算法研究员</h3>
                            <div class="job-salary">¥25K - ¥50K / 月</div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1041/24/24" alt="公司Logo" class="author-avatar">
                                    <span>视觉智能</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-map-marker"></i>
                                        <span>上海</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-clock"></i>
                                        <span>1周前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 招聘3 -->
                    <div class="content-card">
                        <img src="https://picsum.photos/id/96/600/400" alt="自动驾驶工程师招聘" class="content-image">
                        <div class="content-body">
                            <span class="content-category category-job">全职</span>
                            <h3 class="content-title">自动驾驶系统工程师 <span class="job-type">高薪</span></h3>
                            <div class="job-salary">¥40K - ¥80K / 月</div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1042/24/24" alt="公司Logo" class="author-avatar">
                                    <span>未来出行科技</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-map-marker"></i>
                                        <span>深圳</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-clock"></i>
                                        <span>2天前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相关问答 -->
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">AI技术问答</h2>
                    <a href="#" class="view-all">
                        查看全部 <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
                
                <div class="content-grid">
                    <!-- 问答1 -->
                    <div class="content-card">
                        <div class="content-body">
                            <span class="content-category category-question">技术问题</span>
                            <div class="question-meta">
                                <div>
                                    <span class="answer-count">
                                        <i class="fas fa-comment"></i> 12个回答
                                    </span>
                                </div>
                                <div>2天前</div>
                            </div>
                            <h3 class="content-title">大语言模型的参数规模与性能之间存在线性关系吗？</h3>
                            <div class="question-tags">
                                <span class="question-tag">大语言模型</span>
                                <span class="question-tag">模型训练</span>
                                <span class="question-tag">AI性能</span>
                            </div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1050/24/24" alt="提问者头像" class="author-avatar">
                                    <span>机器学习初学者</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>1.2k</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>45</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 问答2 -->
                    <div class="content-card">
                        <div class="content-body">
                            <span class="content-category category-question">技术问题</span>
                            <div class="question-meta">
                                <div>
                                    <span class="answer-count">
                                        <i class="fas fa-comment"></i> 8个回答
                                    </span>
                                </div>
                                <div>5天前</div>
                            </div>
                            <h3 class="content-title">如何解决计算机视觉模型在复杂环境下的识别准确率问题？</h3>
                            <div class="question-tags">
                                <span class="question-tag">计算机视觉</span>
                                <span class="question-tag">模型优化</span>
                                <span class="question-tag">环境适应性</span>
                            </div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1051/24/24" alt="提问者头像" class="author-avatar">
                                    <span>计算机视觉开发者</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>956</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>32</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 问答3 -->
                    <div class="content-card">
                        <div class="content-body">
                            <span class="content-category category-question">行业问题</span>
                            <div class="question-meta">
                                <div>
                                    <span class="answer-count">
                                        <i class="fas fa-comment"></i> 15个回答
                                    </span>
                                </div>
                                <div>1周前</div>
                            </div>
                            <h3 class="content-title">自动驾驶技术的主要安全挑战是什么？有哪些解决方案？</h3>
                            <div class="question-tags">
                                <span class="question-tag">自动驾驶</span>
                                <span class="question-tag">安全挑战</span>
                                <span class="question-tag">智能交通</span>
                            </div>
                            <div class="content-meta">
                                <div class="content-author">
                                    <img src="https://picsum.photos/id/1052/24/24" alt="提问者头像" class="author-avatar">
                                    <span>交通工程研究者</span>
                                </div>
                                <div class="content-stats">
                                    <div class="content-stat">
                                        <i class="fas fa-eye"></i>
                                        <span>1.5k</span>
                                    </div>
                                    <div class="content-stat">
                                        <i class="fas fa-heart"></i>
                                        <span>67</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 内容标签切换功能
        document.querySelectorAll('.content-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有标签的active类
                document.querySelectorAll('.content-tab').forEach(t => t.classList.remove('active'));
                // 给当前点击的标签添加active类
                this.classList.add('active');
                
                // 在实际应用中，这里会根据不同标签加载对应内容
                // 这里仅做UI演示
            });
        });
        
        // 投票选项选择功能
        document.querySelectorAll('.vote-option').forEach(option => {
            option.addEventListener('click', function() {
                // 移除同组其他选项的selected类
                document.querySelectorAll('.vote-option').forEach(opt => opt.classList.remove('selected'));
                // 给当前点击的选项添加selected类
                this.classList.add('selected');
            });
        });
        
        // 评论点赞功能
        document.querySelectorAll('.comment-reaction').forEach(reaction => {
            reaction.addEventListener('click', function() {
                if (this.querySelector('.fas.fa-heart')) {
                    this.classList.toggle('liked');
                }
            });
        });
        
        // 收藏按钮功能
        document.querySelector('.secondary-action .fas.fa-bookmark').parentElement.addEventListener('click', function() {
            this.classList.toggle('active');
            const textSpan = this.querySelector('span');
            if (this.classList.contains('active')) {
                textSpan.textContent = '已收藏';
            } else {
                textSpan.textContent = '收藏';
            }
        });
    </script>
</body>
</html>

